
import { useState } from 'react'
import { Row, Col, List, Card } from 'antd'

import Heada from './api/Head'
import Header from './api/Header'
import Login from './api/Login'
import Carousel from './api/Carousel'
import Footer from './api/Footer'

import '../styles/pages/index.scss'

function Index() {
  // 登录框显示和隐藏
  const [isModalVisible, setIsModalVisible] = useState(false)

  const LoginButton = () => {
    setIsModalVisible('true')
  }

  // 登录框事件，点击确定按钮 
  const ok = () => {
    setIsModalVisible(false)
  }

  // 登录框事件，点击取消按钮 handleCancel
  const Cancel = () => {
    setIsModalVisible(false)
  }

  // 左侧模拟数据
  const ListArr = [
    {title: '标题1', content: '我是内容1哦', data:'2021.2.21', img: 'http://p6.qhimg.com/bdr/__85/t010b7ecf1516fa418c.jpg'},
    {title: '标题2', content: '我是内容2哦', data:'2021.2.21', img: 'http://p3.qhimg.com/bdr/__85/t01ec1c702f9fc48b66.jpg'},
    {title: '标题3', content: '我是内容3哦', data:'2021.2.21', img: 'http://p0.qhimg.com/bdr/__85/t01d91ca0c00c95d469.jpg'}
  ]

  // 右侧模拟数据
  const upDate = {
      name: 'MuTu',
      icon: 'https://profile.csdnimg.cn/1/A/C/0_zxf_cn',
      accounts:[
        { url: 'https://i.csdn.net/#/user-center/profile', accountsIcon: 'https://newimg.jspang.com/bilibiliIcon1.png' },
        { url: 'https://i.csdn.net/#/user-center/profile', accountsIcon: 'https://newimg.jspang.com/bilibiliIcon1.png' },
        { url: 'https://i.csdn.net/#/user-center/profile', accountsIcon: 'https://newimg.jspang.com/bilibiliIcon1.png' }
      ]
    }

  return (
    <div className="index-content">
      {/* 标题组件 */}
      <Heada title={'Mu To'}></Heada>

      {/* 头部组件 */}
      <Header onClickLogin={LoginButton} />

      {/* 登录框组件 */}
      <Login
        isShow={isModalVisible}
        handleOk={ok}
        handleCancel={Cancel}
      />

      {/* 主体部分 */}
      <div className="body">
        {/* 轮播图 */}
        <div className="carousel">
          <Carousel />
        </div>
        {/* 2栏布局 */}
        <Row justify="space-between" className="two-col">
          <Col className="left" xs={24} sm={24} md={24} lg={17}>
            <List
              header="全部文章"
              itemLayout="vertical"
              dataSource={ListArr}
              renderItem={item => (
                <List.Item 
                  key={item.title}
                  actions={[
                    <div className="article-content">
                      {/* 图片 */}
                      <div className="img">
                        <img src={item.img}></img>
                      </div>
                      {/* 文本 */}
                      <div className="article-text">
                        {/* 标题 */}
                        <h2> {item.title} </h2>
                        {/* 日期 */}
                        <div className="data"> {item.data} </div>
                        {/* 摘要 */}
                        <p>{item.content}</p>
                        {/* 数据 */}
                        <div className="icon">
                          <i className="iconfont">&#xe79c; 123</i>
                          <i className="iconfont">&#xe600; 32</i>
                          <i className="iconfont">&#xe601; 1</i>
                        </div>
                      </div>
                    </div>
                  ]}
                >
                </List.Item>
              )}
            />
          </Col>
          <Col className="right" xs={0} sm={0} md={0} lg={6}>
            {/* up信息 */}
            <div className="up-data">
              <h2>up 信息栏</h2>
              <Card>
                {/* 头像 */}
                <img src={upDate.icon} />
                {/* 名称 */}
                <p> {upDate.name} </p>
                {/* 账号 */}
                <div className="accounts">
                  {
                    upDate.accounts.map((item, i) => {
                      return (
                      <a key={i} href={item.url} target="_blank">
                        <img src={item.accountsIcon} />
                      </a>
                      )
                    })
                  }
                </div>
              </Card>
            </div>

            {/* 广告位 */}
            <div className="advertising">
              <h2>广告空位</h2>
              <Card>
                一年50元
              </Card>
            </div>
          </Col>
        </Row>
      </div>

      {/* 尾部 */}
      <Footer />
    </div>
  )
}

export default Index
